<template>
<div id="main" style="width: 1500px;height: 700px">


</div>
  <el-date-picker v-model="startTime" type="year" value-format="YYYY" style="width: 15%"
                  placeholder="起始日期">
  </el-date-picker>

  <el-button type="primary" @click="query()">搜索</el-button>
</template>

<script>
import * as echarts from 'echarts';
import axios from "axios";
export default {
  name: "MonthlySalesStatistics",
  data(){
    return{
      option:{},
      myChar:{},
      startTime:'2022',

    }
        },

  mounted() {
  this.query()
},
  methods:{
    query(){
      let param = new URLSearchParams


      param.append('yer', this.startTime)


      this.myChart = echarts.init(document.getElementById('main'));
      axios.post("/api/sellInfo/queryMonthlyBeans",param).then(res=>{
        console.log(res.data)
        this.option= {
          legend: {},
          tooltip: {},
          dataset: {
            dimensions: ['月份', '电脑产品', '手机产品','办公耗材','电脑配件'],
            source: res.data
          },
          xAxis: { type: 'category' },
          yAxis: {},
          // Declare several bar series, each will be mapped
          // to a column of dataset.source by default.
          series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
        };

        this.myChart.setOption(this.option);

      })
    }
  }
}
</script>

<style scoped>

</style>